<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>举报管理 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #6366f1;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --pending: #64748b;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f1f5f9;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 10px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 0;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        .nav-btn.primary {
            color: var(--primary);
        }
        
        /* 筛选栏 */
        .filter-bar {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            height: 50px;
            background-color: var(--bg-white);
            display: flex;
            border-bottom: 1px solid var(--border-light);
            z-index: 900;
        }
        
        .filter-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            color: var(--text-secondary);
            position: relative;
        }
        
        .filter-item.active {
            color: var(--primary);
            font-weight: 500;
        }
        
        .filter-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--primary);
        }
        
        /* 内容容器 */
        .content-container {
            margin-top: 106px;
            padding-bottom: 20px;
        }
        
        /* 通用区块样式 */
        .section {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            margin: 0 16px 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        /* 举报列表项 */
        .report-item {
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .report-item:last-child {
            border-bottom: none;
        }
        
        .report-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            align-items: center;
        }
        
        .report-status {
            font-size: 13px;
            padding: 3px 10px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background-color: rgba(100, 116, 139, 0.1);
            color: var(--pending);
        }
        
        .status-handling {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        .status-resolved {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .status-rejected {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .report-time {
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .report-type {
            font-size: 14px;
            color: var(--danger);
            font-weight: 500;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .report-content {
            font-size: 15px;
            line-height: 1.5;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        /* 举报图片容器 */
        .report-images {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        
        .report-image {
            width: 90px;
            height: 90px;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0;
            background-color: var(--bg-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
        }
        
        .report-image img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
            object-fit: cover;
        }
        
        /* 被举报内容预览 */
        .reported-content {
            background-color: var(--bg-light);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }
        
        .content-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .content-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
        }
        
        .content-author {
            font-size: 14px;
            font-weight: 500;
        }
        
        .content-text {
            font-size: 14px;
            color: var(--text-primary);
            line-height: 1.4;
            margin-bottom: 8px;
        }
        
        /* 操作按钮 */
        .report-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .action-btn {
            padding: 6px 14px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            border: none;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-secondary {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .btn-danger {
            background-color: var(--danger);
            color: white;
        }
        
        /* 无数据状态 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: var(--text-tertiary);
        }
        
        .empty-icon {
            font-size: 60px;
            margin-bottom: 16px;
            opacity: 0.3;
        }
        
        .empty-text {
            font-size: 16px;
            margin-bottom: 8px;
        }
        
        .empty-subtext {
            font-size: 14px;
            opacity: 0.8;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 图片预览弹窗 */
        .image-preview-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        
        .image-preview-modal.active {
            display: flex;
        }
        
        .preview-image {
            max-width: 90%;
            max-height: 80%;
            object-fit: contain;
        }
        
        .close-preview {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">举报管理</div>
        <button class="nav-btn primary" id="newReportBtn">
            <i class="fas fa-plus"></i>
        </button>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-item active">全部</div>
        <div class="filter-item">待处理</div>
        <div class="filter-item">处理中</div>
        <div class="filter-item">已解决</div>
    </div>
    
    <!-- 内容容器 -->
    <div class="content-container">
        <!-- 举报项1 - 多图 -->
        <div class="section">
            <div class="report-item">
                <div class="report-header">
                    <span class="report-status status-pending">待处理</span>
                    <span class="report-time">今天 09:24</span>
                </div>
                <div class="report-type">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>举报类型：垃圾广告</span>
                </div>
                <div class="report-content">
                    该用户在多个帖子下发布相同的广告内容，包含二维码和联系方式，严重影响社区体验。
                </div>
                <div class="report-images">
                    <div class="report-image">
                        <img src="https://picsum.photos/id/237/200/200" alt="举报图片1">
                    </div>
                    <div class="report-image">
                        <img src="https://picsum.photos/id/238/200/200" alt="举报图片2">
                    </div>
                    <div class="report-image">
                        <img src="https://picsum.photos/id/239/200/200" alt="举报图片3">
                    </div>
                </div>
                <div class="reported-content">
                    <div class="content-header">
                        <div class="content-avatar">张</div>
                        <div class="content-author">张明</div>
                    </div>
                    <div class="content-text">
                        专业办理各类证件，快速高效，价格优惠，扫码咨询详情，24小时在线服务...
                    </div>
                </div>
                <div class="report-actions">
                    <button class="action-btn btn-secondary" data-action="cancel">取消</button>
                    <button class="action-btn btn-primary" data-action="edit">编辑</button>
                </div>
            </div>
        </div>
        
        <!-- 举报项2 - 单图 -->
        <div class="section">
            <div class="report-item">
                <div class="report-header">
                    <span class="report-status status-handling">处理中</span>
                    <span class="report-time">昨天 15:47</span>
                </div>
                <div class="report-type">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>举报类型：不当言论</span>
                </div>
                <div class="report-content">
                    该用户发表的评论包含人身攻击和侮辱性语言，违反社区规定，请管理员处理。
                </div>
                <div class="report-images">
                    <div class="report-image">
                        <img src="https://picsum.photos/id/240/200/200" alt="举报图片">
                    </div>
                </div>
                <div class="reported-content">
                    <div class="content-header">
                        <div class="content-avatar">李</div>
                        <div class="content-author">李华</div>
                    </div>
                    <div class="content-text">
                        你这种人就是活该，脑子有问题吧，根本不懂就别在这里瞎说...
                    </div>
                </div>
                <div class="report-actions">
                    <button class="action-btn btn-primary" data-action="check">查看进度</button>
                </div>
            </div>
        </div>
        
        <!-- 举报项3 - 无图 -->
        <div class="section">
            <div class="report-item">
                <div class="report-header">
                    <span class="report-status status-resolved">已解决</span>
                    <span class="report-time">2023-06-20 11:32</span>
                </div>
                <div class="report-type">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>举报类型：抄袭内容</span>
                </div>
                <div class="report-content">
                    该文章完全抄袭自其他平台，我已附上原作者链接和发布时间，该用户未注明转载来源，涉嫌侵权。
                </div>
                <div class="reported-content">
                    <div class="content-header">
                        <div class="content-avatar">王</div>
                        <div class="content-author">王伟</div>
                    </div>
                    <div class="content-text">
                        人工智能在医疗领域的应用与前景分析：随着技术的不断发展，AI正在改变传统医疗模式...
                    </div>
                </div>
                <div class="report-actions">
                    <button class="action-btn btn-primary" data-action="result">查看结果</button>
                </div>
            </div>
        </div>
        
        <!-- 举报项4 - 多图 -->
        <div class="section">
            <div class="report-item">
                <div class="report-header">
                    <span class="report-status status-rejected">已驳回</span>
                    <span class="report-time">2023-06-18 08:56</span>
                </div>
                <div class="report-type">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>举报类型：虚假信息</span>
                </div>
                <div class="report-content">
                    该用户发布的产品信息与实际不符，夸大效果，可能存在欺诈行为，我已购买使用但完全没有效果。
                </div>
                <div class="report-images">
                    <div class="report-image">
                        <img src="https://picsum.photos/id/241/200/200" alt="举报图片1">
                    </div>
                    <div class="report-image">
                        <img src="https://picsum.photos/id/242/200/200" alt="举报图片2">
                    </div>
                </div>
                <div class="reported-content">
                    <div class="content-header">
                        <div class="content-avatar">赵</div>
                        <div class="content-author">赵静</div>
                    </div>
                    <div class="content-text">
                        这款减肥产品效果惊人，无需节食运动，一周瘦10斤，无效退款，点击购买...
                    </div>
                </div>
                <div class="report-actions">
                    <button class="action-btn btn-secondary" data-action="appeal">申诉</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 图片预览弹窗 -->
    <div class="image-preview-modal" id="imagePreviewModal">
        <img src="" alt="图片预览" class="preview-image" id="previewImage">
        <button class="close-preview" id="closePreview">
            <i class="fas fa-times"></i>
        </button>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const newReportBtn = document.getElementById('newReportBtn');
        const filterItems = document.querySelectorAll('.filter-item');
        const actionBtns = document.querySelectorAll('.action-btn');
        const reportImages = document.querySelectorAll('.report-image img');
        const imagePreviewModal = document.getElementById('imagePreviewModal');
        const previewImage = document.getElementById('previewImage');
        const closePreview = document.getElementById('closePreview');
        const toast = document.getElementById('toast');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 打开图片预览
        function openImagePreview(src) {
            previewImage.src = src;
            imagePreviewModal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭图片预览
        function closeImagePreview() {
            imagePreviewModal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 新举报按钮
            newReportBtn.addEventListener('click', () => {
                showToast('进入新举报页面');
            });
            
            // 筛选器点击
            filterItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有active类
                    filterItems.forEach(i => i.classList.remove('active'));
                    // 添加当前active类
                    this.classList.add('active');
                    showToast(`筛选：${this.textContent}`);
                });
            });
            
            // 操作按钮点击
            actionBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const action = this.getAttribute('data-action');
                    const actions = {
                        'cancel': '举报已取消',
                        'edit': '进入举报编辑页面',
                        'check': '查看处理进度',
                        'result': '查看处理结果',
                        'appeal': '进入申诉页面'
                    };
                    showToast(actions[action] || '操作成功');
                });
            });
            
            // 举报图片点击预览
            reportImages.forEach(img => {
                img.addEventListener('click', function() {
                    openImagePreview(this.src);
                });
            });
            
            // 关闭图片预览
            closePreview.addEventListener('click', closeImagePreview);
            
            // 点击预览背景关闭
            imagePreviewModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeImagePreview();
                }
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>
